ממשק משתמש גרפי בעזרת SWT. תוכנה 1 בשפת Java

Transcription

1 ממשק משתמש גרפי בעזרת SWT תוכנה 1 בשפת Java 1

2 SWT ה בנויה על העיקרון של publish/subscribe אלמנטים בסיסיים )Widgets( מייצרים אירועים )Events( שאליהם נרשמים מאזינים )Listener( דוגמא 1: משתמש לוחץ על כפתור, שמייצר אירוע לחיצה. מאזין שנרשם לאירוע הלחיצה של הכפתור יכול לשנות את כותרת החלון דוגמא 2: משתמש סוגר את החלון, שמייצר אירוע סגירת חלון. מאזין שנרשם לאירוע סגירת החלון פותח חלון ששואל את המשתמש אם הוא רוצה לשמור את השינויים לפני שיצא מהתכנית. Widgets מאזינים וה- Events מוגדרים ע"י כותבי הספרייה נכתבים ע"י כותבי האפליקציה מאפשר תגובות שונות לאירועים כתלות באפליקציה 2

3 SWT Widgets אבני הבניין של ממשקים גרפים מוגדרים ב org.eclipse.swt.widgets תת-טיפוסים של המחלקה האבסטרקטית Widget )קישור לתיעוד( האתר של SWT מכיל דוגמאות קצרות )snippets( לשימוש בכל Widget Shell Table Menu Label Text List Button 3

4 עוד על Widgets ביצירת Widget את ה"הורה" שלו את הסגנון שלו ה- נגדיר ההורה הוא Widget היורש מ- Composite, מה שאומר שניתן להוסיף אליו Widgets אחרים לדוגמא, כפתור שההורה שלו הוא טאב שההורה שלו הוא חלון יופיע כפתור בתוך הטאב שבחלון Widget מתווסף להורה בזמן הקריאה לבנאי עבור סגנונות קיימים קבועים במחלקה SWT נראה בהמשך

5 כפתור public class ShellWithButton1 { public static void main(string[] args) { Display display = Display.getDefault(); Shell shell = new Shell(display); shell.setlayout(new FillLayout(SWT.VERTICAL)); shell.settext("example1"); Button ok = new Button(shell, SWT.PUSH); ok.settext("push Me!"); shell.pack(); shell.open(); while (!shell.isdisposed()) { if (!display.readanddispatch()) display.sleep(); display.dispose(); 5

6 אז מה היה לנו כאן? Display display = Display.getDefault(); מקשר בין SWT לתצוגת מערכת ההפעלה )למשל, המסך( Display Shell shell = new Shell(display); חלון. שימו לב שיצירת חלון לא פותחת אותו עדין. Shell shell.setlayout(new FillLayout(SWT.VERTICAL)); לכל Composite ניתן להוסיף layout שיגדיר כיצד Widgets מסודרים בתוכו ממלאים את ה- Composite Widgets ה- FillLayout ה- Widgets מסודרים בצורה אנכית לפי סדר הוספתם ל- SWT.VERTICAL Composite דומה ל-,FillLayout אבל ה- Widgets שומרים על גודל RowLayout קבוע מסדר את ה- Widgets בגריד )לפי עמודות ושורות( GridLayout 6

7 אז מה היה לנו כאן? shell.settext("example1"); Button ok = new Button(shell, SWT.PUSH); ok.settext("push Me!"); משתנה בהתאם לטיפוס ה-.Widget בחלון קובע את settext קובע מה כתוב על הכפתור. shell.pack(); הכותרת, בכפתור לחיצה )PUSH( גורם לאובייקט גרפי לחשב ולהתאים את גודלו, למשל בהתאם pack ל- layout, ל- Widgets שבתוכו וכו' shell.open(); פתיחת החלון 7

8 לולאת האירועים loop( )Event while (!shell.isdisposed ()) { if (!display.readanddispatch()) display.sleep(); display.dispose(); קוד סטנדרטי שמופיע כמעט בכל תכנית SWT כל עוד החלון הראשי של התכנית לא נסגר טפל באירוע הבא בתור ובדוק האם קיים אירוע נוסף אם לא קיים היכנס למצב שינה עד לקבלת אירוע נוסף בסוף משחררים את כל המשאבים שהוקצו ע"י קריאה ל- dispose כאשר משחררים אלמנט גרפי, כל הצאצאים שלו גם משתחררים כאשר משחררים את,Display כל המשאבים הגרפיים משתחררים 8

9 לולאת האירועים loop( )Event מערכת ההפעלה מודיעה לתוכנית על אירועים: הקשות על המקלדת, הזזת עכבר והקלקה, בחירת אלמנטים, ועוד. ההודעה מתקבלת על ידי עצם יחיד ( singleton )מהמחלקה Display, שמייצג את מערכת ההפעלה קבלת אירוע מעירה את התוכנית מהשינה ב- sleep כאשר קוראים ל- readanddispatch ה- display מברר לאיזה רכיב צריך להודיע על האירוע, ומודיע לו הרכיב מפעיל את העצמים מהטיפוס המתאים לסוג האירוע שנרשמו להפעלה על ידי קריאה ל- addlistener 9

10 הכפתור לא מגיב ללחיצות. הוספת טיפול בארועים יש להוסיף טיפול על המחלקה המטפלת לממש את המנשק SelectionListener על הכפתור עצמו להגדיר מי העצם באירוע כמה גישות אפשריות: הגדרת מחלקה שיורשת מכפתור מחלקה שמכילה כפתור כאחד משדותיה בארוע "לחיצה" )או העצמים( שיטפלו הוספת מאזין שיטפל באירועי הלחיצה בעת יצירת הכפתור המימושים שנראה היום משתייכים לגישה השלישית 10

11 הכפתור לא מגיב ללחיצות. הוספת טיפול בארועים יש להוסיף טיפול באירוע עלינו לממש מאזין המקבל שמטפל באירוע הווידג'ט המתאים. כיצד נדע אילו אירועים מייצר Widget מסוים? נסתכל בתיעוד התיעוד של :Button ולהרשם "לחיצה" על איזה מנשק עלינו לממש? 11

12 טיפול בארועים במחלקה נפרדת public class ButtonHandler implements SelectionListener { public void widgetselected(selectionevent e) { if (e.getsource() instanceof Button) { Button b = (Button) e.getsource(); b.settext("thanks!"); public void widgetdefaultselected(selectionevent e){ // TODO Auto-generated method stub 12

13 טיפול בארועים במחלקה נפרדת Display display = Display.getDefault(); Shell shell = new Shell(display); shell.setlayout(new FillLayout(SWT.VERTICAL)); shell.settext("example2"); Button ok = new Button(shell, SWT.PUSH); ok.settext("push Me!"); ok.addselectionlistener(new ButtonHandler()); shell.pack(); shell.open(); while (!shell.isdisposed()) { if (!display.readanddispatch()) display.sleep(); display.dispose(); 13

14 טיפול בארועים במחלקה נפרדת לעיתים הטיפול באירוע דורש הכרות אינטימית עם המקור )כדי להימנע מחשיפת המבנה הפנימי של המקור( שימוש במחלקה פנימית יוצר את האינטימיות הדרושה בדוגמא הבאה נרצה לעדכן תווית על סמך קלט מהמשתמש דרושה הכרות לא רק עם יוצר האירוע )Text( אלא גם עם חלקים אחרים במבנה 14

15 מחלקה פנימית public class ShellWithLabelAndTextField1 { private Label label; private Text text; public static void main(string[] args) {... public void createshell() {... המחלקה הפנימית ניגשת לשדות הפרטיים של המחלקה העוטפת public class InnerHandler implements KeyListener { public void keypressed(keyevent e) { if (e.character == SWT.CR) { label.settext(text.gettext()); text.settext(""); public void keyreleased(keyevent e) { // TODO Auto-generated method stub 15

16 מחלקה פנימית public class ShellWithLabelAndTextField1 { private Label label; private Text text; public static void main(string[] args) { ShellWithLabelAndTextField1 shell = new ShellWithLabelAndTextField1(); shell.createshell(); public void createshell() { Display display = new Display(); Shell shell = new Shell(display); shell.setlayout(new RowLayout(SWT.VERTICAL)); label = new Label(shell, SWT.CENTER); label.settext("type text and press [ENTER]"); text = new Text(shell, SWT.LEFT); text.addkeylistener(new InnerHandler()); // pack(), open(), while... Dispose() 16

17 שימוש במחלקות אנונימיות בדרך כלל נזדקק רק למאזין יחיד לכל אירוע נשתמש במחלקה לוקאלית אנונימית תזכורת: new classname([argument-list]) {classbody יצירת מופע חדש של מחלקה ללא שם, שטרם הוגדרה, שיורשת באופן אוטומטי מ classname new interfacename() {classbody יצירת מופע חדש של מחלקה ללא שם, שטרם הוגדרה, שמממשת באופן אוטומטי את interfacename 17

18 מחלקה אנונימית public class ShellWithLabelAndTextField2 { private Label label; private Text text; public static void main(string[] args) {... public void createshell() {... text.addkeylistener(new KeyListener() { public void keypressed(keyevent e) { if (e.character == SWT.CR) { label.settext(text.gettext()); text.settext(""); public void keyreleased(keyevent e) { // TODO Auto-generated method stub ); סוגר סוגריים של המתודה addkeylistener() // pack(), open(), while... Dispose() 18

19 שימוש ב Adapter public class ShellWithLabelAndTextField2 { private Label label; private Text text; public static void main(string[] args) {... public void createshell() {... text.addkeylistener(new KeyAdapter() { public void keypressed(keyevent e) { if (e.character == SWT.CR) { label.settext(text.gettext()); text.settext(""); ); public class KeyAdapter implements KeyListener public void keypressed(keyevent arg0) { //do public void keyreleased(keyevent arg0) { // do nothing // pack(), open(), while... Dispose() 19

20 המחלקה SWT... מוגדרת ב org.eclipse.swt.swt אוסף של קבועים: אירועים,Activate,MouseDown,FocusIn,Close צבעים,COLOR_BLACK,COLOR_BLUE... תווים,CR,ESC,DEL... אירוע מקשים,ARROW_DOWN,END... עיצובים ניתן להוסיף מס' )bitwise OR( קבועים ע"י שימוש באופרטור SWT.V_SCROLL SWT.H_SCROLL SWT.BORDER 20

21 דוגמא נוספת רשימת משימות public class TaskList1 { private static final Display display = Display.getDefault(); private static Shell shell; public static void main(string[] args) { TaskList1 tasklist = new TaskList1(); tasklist.createshell(); tasklist.runapplication(); private void createshell() { shell = new Shell(display); shell.settext("my Tasks"); private void runapplication() { shell.pack(); shell.open(); while (!shell.isdisposed()) { if (!display.readanddispatch()) display.sleep(); display.dispose(); נכתוב אפליקציית SWT פשוטה המאפשרת להזין משימות בשדה טקסט, ללחוץ על כפתור ולהוסיף את הטקסט שהוזן לרשימה. נתחיל מבניית שלד האפליקציה 21

22 הוספת Widgets private void createshell() { shell = new Shell(display); shell.settext("my Tasks"); shell.setlayout(new FillLayout(SWT.VERTICAL)); נוסיף Layout בסיסי ל- Shell, וכן שדה טקסט, כפתור ורשימה כרגע אין מאזינים לאף פעולה //a text field to enter a task Text input = new Text(shell, SWT.LEFT); //a button to add a task to the list Button add = new Button(shell, SWT.PUSH); add.settext("add"); //the list List list = new List(shell, SWT.BORDER); 22

23 הוספת פונקציונליות //a text field to enter a task final Text input = new Text(shell, SWT.LEFT); //a button to add a task to the list Button add = new Button(shell, SWT.PUSH); add.settext("add"); // the list final List list = new List(shell, SWT.BORDER); // the action to perform when pressing the button add.addselectionlistener(new SelectionAdapter() public void widgetselected(selectionevent e) { String text = input.gettext(); //add the task to the list, if the input text is not empty if (text!= null && text.length() > 0) { list.add(text); input.settext(""); ); כעת, נוסיף את הפעולה של לחיצה על כפתור תוך שימוש במחלקה אנונימית. הכפתור צריך להכיר את משתנים מקומיים ולכן נשנה ל-.final לחלופין אפשר שיהיו effectively final 23

24 נטפל בעיצוב החלון Add תחילה, נתכנן איך היינו רוצים שהחלון ייראה וכיצד הוא ישתנה בשינוי גודל החלון Add Add Add 24

25 עיצוב החלון shell = new Shell(display); shell.settext("my Tasks"); shell.setlayout(new GridLayout(2, false)); // a text field to enter a task final Text input = new Text(shell, SWT.LEFT); input.setlayoutdata(new GridData( GridData.FILL_HORIZONTAL)); // a button to add a task to the list Button add = new Button(shell, SWT.FLAT); add.settext("add"); // the list final List list = new List(shell, SWT.BORDER); GridData listgriddata = new GridData(GridData.FILL_BOTH); listgriddata.horizontalspan = 2; listgriddata.widthhint = 300; listgriddata.heighthint = 300; list.setlayoutdata(listgriddata); נשתמש ב- GridLayout מוסיף אלמנטים לגריד משמאל לימין ומלמעלה למטה לפי הסדר מאפשר הוספת GridData שמציין איך כל Widget יתנהג בגריד הרשימה נמתחת לרוחב ולאורך, תופסת שני טורים, וגודלה המומלץ 300x300 פיקסלים שדה הטקסט נמתח לרוחב שני טורים ברוחב לא אחיד 25

26 עיצוב החלון עכשיו האפליקציה שלנו נראית כך עוד תוספות? סימון משימה כ"הושלמה" הוספת תאריך יצירת המשימה הוספת תאריך יעד לביצוע המשימה עריכת משימה מחיקת משימה... 26

27 תוספת - מחיקת משימות מהרשימה נוסיף delete לרשימה שיאזין ללחיצה על KeyListener מ- Widget הרשימה ניתן לקבל את האינדקס של הפריט הנבחר ולמחוק את הפריט // the action to perform when DELETE is pressed on the list list.addkeylistener(new KeyAdapter() public void keypressed(keyevent e) { if (e.character == SWT.DEL) { int selectionindex = list.getselectionindex(); //if a list item is selected, delete it from the list if (selectionindex >= 0) list.remove(selectionindex); ); 27